<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>倒计时</title>
    <style>
        .countdown {
            width: 240px;
            height: 305px;
            text-align: center;
            line-height: 1;
            color: #fff;
            background-color: brown;
            /* background-size: 240px; */
            /* float: left; */
            overflow: hidden;
        }

        .countdown .next {
            font-size: 16px;
            margin: 25px 0 14px;
        }

        .countdown .title {
            font-size: 33px;
        }

        .countdown .tips {
            margin-top: 80px;
            font-size: 23px;
        }

        .countdown small {
            font-size: 17px;
        }

        .countdown .clock {
            width: 142px;
            margin: 18px auto 0;
            overflow: hidden;
        }

        .countdown .clock span,
        .countdown .clock i {
            display: block;
            text-align: center;
            line-height: 34px;
            font-size: 23px;
            float: left;
        }

        .countdown .clock span {
            width: 34px;
            height: 34px;
            border-radius: 2px;
            background-color: #303430;
        }

        .countdown .clock i {
            width: 20px;
            font-style: normal;
        }
    </style>
</head>

<body>
    <div class="countdown">
        <p class="next">今天是2222年2月22日</p>
        <p class="title">下课倒计时</p>
        <p class="clock">
            <span id="hour">00</span>
            <i>:</i>
            <span id="minutes">25</span>
            <i>:</i>
            <span id="scond">20</span>
        </p>
        <p class="tips">18:30:00下课</p>
    </div>
    <script>
        const getCountTime = function () {
            const next = document.querySelector('.next')
            const date = new Date()
            // 设置当前时间
            next.innerHTML = `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`

            // 获取当前时间的时间戳
            const now = date.getTime()

            // 下班时间的时间戳
            const last = new Date(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 18:30:00`)

            // 剩余时间戳(秒)
            const count = (last - now) / 1000

            // 时
            const h = (parseInt(count / 60 / 60)).toString().padStart(2, '0')

            // 分
            const m = (parseInt(count / 60 % 60)).toString().padStart(2, '0')

            // 秒
            const s = (parseInt(count % 60)).toString().padStart(2, '0')

            const clock = document.querySelectorAll('.clock span')

            clock[0].innerHTML = h
            clock[1].innerHTML = m
            clock[2].innerHTML = s
        }

        // 清除刷新时时间显示错误
        getCountTime()

        setInterval(getCountTime, 1000)
    </script>
</body>

</html>